<template>
  <el-dialog
    custom-class="camera-set-comp"
    title="摄像头配置"
    :close-on-click-modal="false"
    append-to-body
    :visible="visible"
    :width="$setRem(500)"
    :before-close="handleCancel">
    <el-form
      class="set-live-form"
      size="medium"
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      :label-width="$setRem(120)"
    >
      <el-form-item label="appKey" prop="appKey" required>
        <el-input placeholder="请输入appKey" v-model="ruleForm.appKey"></el-input>
      </el-form-item>
      <el-form-item label="appSecert" prop="appSecert" required>
        <el-input placeholder="请输入appSecert" v-model="ruleForm.appSecert"></el-input>
      </el-form-item>
    </el-form>
    <span class="dialog-footer">
      <el-button type="primary" @click="handleCancel">取 消</el-button>
      <el-button
        class="success"
        type="primary"
        :loading="loading"
        @click="hanldeSave">
        保 存
      </el-button>
    </span>
  </el-dialog>
</template>

<script>

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      ruleForm: {
        id: '',
        appKey: '',
        appSecert: '',
      },
      // form 表单校验规则
      rules: {
        appKey: [
          { required: true, message: '请输入appKey' }
        ],
        appSecert: [
          { required: true, message: '请输入appSecert' }
        ],
      },
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
  },
  watch: {
    async visible(val) {
      const { success, data: {
        data
      }} = await this.$Model.getCameraConfigList({
        pageFlag: false,
        projectId: this.projectId
      });
      if (success && data && data.list) {
        const item = data.list[0];
        if (item) {
          const { id, appKey, appSecert } = item;
          this.ruleForm = {
            id,
            appKey,
            appSecert
          };
        }
      }
    }
  },
  methods: {
    // 保存
    hanldeSave() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const params = {
            ...this.ruleForm,
            projectId: this.projectId
          };
          this.$emit('submit', params);
        }
      });
    },
    // 取消
    handleCancel() {
      this.$emit('cancel', false);
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';
  .camera-set-comp {
    .set-live-form {
      width: 100%;
      padding-right: 30px;
    }
    .dialog-footer {
      display: flex;
      justify-content: center;
      margin: 10px 0;
    }
  }
</style>
